<template>
    <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>问卷分类界面</span>
        <el-button class="button" type="primary" @click="btnAddDialog"
          >添加</el-button
        >
      </div>
    </template>
       <!-- 查询 -->
       <el-form :inline="true" :model="frmQuery" class="demo-form-inline">
      <el-form-item label="问卷类别">
        <el-input
          v-model="frmQuery.ts_class"
          placeholder="请输入问卷类别"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getClass">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="ts_class" label="问卷类别" width="150" />
      <el-table-column fixed="right" label="操作" width="160">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="updateDialog(scope.row.ts_class)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
        <!-- 分页 -->
        <el-pagination 
    :currentPage="currentPage" 
    :page-size="pageSize" 
    :page-sizes="[5, 10, 20, 30, 40]" 
    :background="true"
    layout="total, sizes, prev, pager, next, jumper" 
    :total="pageInfo.total" @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />
</el-card>
<!-- 修改-->
<el-dialog v-model="updateDialogVisible" :title="dialogTitle">
    <el-form :model="form">
      <el-form-item label="问卷类别" :label-width="formLabelWidth">
        <el-input v-model="form.ts_class" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updateUser">保存</el-button>
      </span>
    </template>
  </el-dialog>
  <!--添加-->
  <el-dialog v-model="dialogFormVisible" title="添加问卷类型">
        <el-form :model="form">
            <el-form :model="form"> 
            <el-form-item label="问卷类型" :label-width="formLabelWidth">
            <el-input v-model="form.ts_class" autocomplete="off" />
          </el-form-item></el-form>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="addUser">添加</el-button>
          </span>
        </template>
    </el-dialog>
</template>

<script>
export default {
    data() {
    return {
      currentPage: 1,
      pageSize: 5,
      pageInfo: {},
      frmQuery: {
        name: "",
      },
      
      formLabelWidth: "140px",
      form: {},
      dialogFormVisible: false, //添加/修改对话框
      tableData: [],
      total: 0, // 数据总数，用于分页
      dialogTitle: "修改问卷类型",
      updateDialogVisible: false,
      
    };
  },
  mounted() {
    this.LoadData();// 加载问卷信息
    this.getData(1, 16) //分页
  },
  methods: {
        // 分页
        getData(num, size) {
      this.$http.get("http://localhost:8080/testselect/page", {
        params: {
          pageNum: num,
          pageSize: size,
        },
      }
      ).then((response) => {
        this.pageInfo = response.data
        this.tableData = this.pageInfo.list
      }).catch((err) => {
        console.log(err);
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getData(this.currentPage, this.pageSize)
      console.log("size", pageSize)

    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      this.getData(this.currentPage, this.pageSize)
      console.log("num", pageNum)

    },
    btnQuery() {
      this.LoadData();
    },
    LoadData() {
      this.$http
        .get("http://localhost:8080/testselect/list", this.frmQuery)
        .then((res) => {
          this.tableData = res.data;
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    updateDialog(ts_class) {
      // 编辑操作
      console.log(ts_class);
      this.$http
        .get("http://localhost:8080/testselect/get/" + ts_class)
        .then((res) => {
          console.log(res.data);
          this.form = res.data;
        })
        .catch((err) => {});
      this.updateDialogVisible = true;
    },
    addUser(){
        console.log(this.form);
        this.$http.post("http://localhost:8080/testselect/add",this.form).then((res)=>{
            console.log(res.data);
            if(res.data==1){
                console.log("添加成功！");
                this.form = {}
                this.dialogFormVisible=false;
                this.LoadData()
                ElMessage({
                  message: '添加成功！',
                  type: 'success',
                })
              }else{
                console.log("添加失败！");
                ElMessage({
                  message: '添加失败！',
                  type: 'warning',
                })
              }
          }).catch((err)=>{
  
          })
      },
      btnAddDialog(){
        this.form = {};
           this.dialogFormVisible = true
       },
       getClass() {
      console.log(this.frmQuery.ts_class);
      this.$http
        .get("http://localhost:8080/testselect/query/" + this.frmQuery.ts_class)
        .then((res) => {
          this.tableData = res.data;
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err); /////
        });
    },
    updateUser(){
      console.log(this.form);
      this.$http
        .post("http://localhost:8080/testselect/update", this.form)
        .then((res) => {
          console.log(res.data);
          if (res.data == 1) {
            console.log("修改成功！");
            this.form = {}; // 清空表单对象
            this.updateDialogVisible = false; // 关闭修改对话框
            this.LoadData(); // 重新加载数据
            ElMessage({
              message: "修改成功！",
              type: "success",
            });
          } else {
            console.log("修改失败！");
            ElMessage({
              message: "修改失败！",
              type: "warning",
            });
          }
        })
        .catch((err) => {});
    }

    
}
}
</script>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box-card {
  width: 100%;
}
</style>